@import "../../style/public";
.split-info {
  display: block;
  position: relative;
  background-color: #fff;
  .top-line {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 10px;
    background-color: #f5f5f5;
  }
  &-list {
    color: #666;
    font-size: 0.7rem;
    position: relative;
    display: block;
    left: 16px;
    font-size: 0.7rem;
    padding: 10px 0px 0px 3px;
    border-bottom: 1px solid #ddd;
    .name {
      display: inline-block;
      position: relative;
      width: 60%;
    }
  }
}
.accountStatement-list {
  .sub-tip{
    @include remCalc(font-size, 24);
    color:#cecece;
  }
  .areabig{
    position: relative;
    &::after{
      content: "";
      position: absolute;
      @include remCalc(top, -50);
      bottom:0;
      left:0;
      right:0;
      z-index: 1;
    }
  }
  .notice {
    background: #fdfcec;
    @include remCalc(font-size, 20);
    @include remCalc(height, 60);
    @include remCalc(line-height, 60);
    @include remCalc(padding, 0, 30);
    color: #f87c36;
    display: inline-flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    i {
      @include remCalc(font-size, 32);
      @include remCalc(padding-right, 12);
    }
  }
  .empty-msg{
    @include remCalc(font-size, 30);
    @include remCalc(padding, 30);
    color: #ccc;
    text-align: center;
    .bg{
      @include remCalc(width, 200);
      @include remCalc(height, 180);
      @include remCalc(margin, 60,auto,30,auto);
      background: url(../../../static/images/no-data.png) 0 0 no-repeat;
      background-size: cover;
    }
  }
  .trade-store-title{
    @include remCalc(font-size, 24);
    @include remCalc(padding, 20,30,0,30);
    color: #999;
  }
  .hide {
    position: absolute;
    left: -9999px;
  }
  .date-picker {
    box-sizing: border-box;
    @include remCalc(padding, 0, 30);
    @include remCalc(height, 68);
    @include remCalc(line-height, 68);
    display: inline-flex;
    align-items: center;
    @include remCalc(font-size, 24);
    color: #999;
    i {
      @include remCalc(padding-right, 12);
    }
  }
  .date-list{
    @include remCalc(padding, 0, 0,0,30);
    background: #fff;
    @include remCalc(margin-bottom, 60);
    >li{
      @include remCalc(padding, 20, 30,20,0);
      display: flex;
      align-items: center;
      justify-content: space-between;
      @include thin-border(false,false,top);
      &:first-child{
        &::after{
          display: none;
        }
      }
      >span{
        color:#333;
        @include remCalc(font-size, 30);
        @include remCalc(padding-right, 30);
      }
      >div{
        flex:1;
        text-align: right;
        color:#333;
        @include remCalc(font-size, 30);
        .bs{
          color:#999;
          @include remCalc(font-size, 20);
          @include remCalc(padding-top, 6);
        }
      }
      i{
        @include remCalc(font-size, 32);
        color:#ccc;
        @include remCalc(margin-left, 12);
      }
    }
  }
  .bill-list {
    > li {
      &.total{
       padding-top:0;
      }
      background: #fff;
      position: relative;
      @include thin-border(true);
      // @include remCalc(margin-top, 20);
      @include remCalc(padding, 20, 0);
      .store-name {
        @include remCalc(font-size, 32);
        color: #333;
        @include remCalc(line-height, 50);
        @include remCalc(padding, 0, 30, 20, 30);
        @extend %text-overflow-2;
        // box-sizing: border-box;
      }
      .bottom {
        position: relative;
        @include thin-border(false, false top);
        //border-top:1px solid #ddd;
        .item {
          @include remCalc(margin, 0, 0, 0, 30);
          @include remCalc(padding, 16, 30, 16, 0);
          @include thin-border(false,false,top);
          color: #333;
          display: flex;
          align-items: center;
          &:first-child{
            &::after{
              display: none;
            }
          }
          .title {
            @include remCalc(font-size, 32);
            @include remCalc(margin-right, 20);
          }
          >div{
            text-align: right;
            flex:1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .zhk-list_rarrow{
              color:#ccc;
            }
          }
          .fh {
            @include remCalc(font-size, 32);
            @include remCalc(margin-right, 8);
          }
          .amount {
            @include remCalc(font-size, 30);
          }
        }
        .detail {
          @include remCalc(padding, 0, 30);
          > li {
            @include remCalc(font-size, 28);
            @include remCalc(padding, 6, 0);
            color: #666;
            display: flex;
            >div{
              align-items: center;
            }
            .jine {
              flex: 1;
              display: flex;
            }
            .bishu {
              @include remCalc(width, 320);
              display: flex;
            }
            .fh {
              @include remCalc(margin, 0, 8, 0, 20);
            }
            span {
              &:first-child {
                width: 5em;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
  .nav-bar {
    display: flex;
    background: #fff;
    @include thin-border(false, false, bottom);
    li {
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);
      flex: 1;
      text-align: center;
      position: relative;
      @include remCalc(font-size, 32);
      color: #333333;
      span {
        display: inline-block;
        @include remCalc(padding, 0, 42);
        position: relative;
      }
      &:first-child {
        &::before {
          content: "";
          position: absolute;
          @include remCalc(top, 10);
          @include remCalc(height, 68);
          width: 1px;
          background: #ddd;
          right: 0;
        }
      }
      &.active {
        color: $color-red;
        span {
          &::before {
            content: "";
            @include remCalc(height, 4);
            left: 0;
            bottom: 0;
            background: $color-red;
            position: absolute;
            width: 100%;
          }
        }
      }
    }
  }
  .btn {
    width: 100%;
    @include remCalc(font-size, 36);
    @include remCalc(height, 88);
    @include remCalc(line-height, 88);
    background: $color-red;
    color: #fff;
    text-align: center;
  }
  .send-email {
    @include remCalc(padding, 30);
    text-align: center;
    .title {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 30);
    }
    input {
      @include remCalc(height, 60);
      @include remCalc(padding, 0, 10);
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #ddd;
      -webkit-appearance: none;
    }
  }
  .btn {
    background: $color-red;
  }
}
.accountStatement-details {
  width: 100%;
  height: 100%;
  .bgw {
    background: #fff;
    @include remCalc(margin-top, 20);
  }
  .expand-section {
    text-align: center;
    @include remCalc(font-size, 24);
    padding:0;
    color: #666;
    >div{
      @include remCalc(padding, 20,0); 
      background-color: #fff !important;
    }
  }
  .shop-name{
    @include remCalc(padding, 20,30,0,30);
    @include remCalc(font-size, 24);
    color:#999;
  }
  .section{
    background: #fff;
    @include remCalc(padding,20);
  }
  .details-list {
    background-color:$background;
    @include remCalc(padding, 20);
    @include remCalc(border-radius, 8);

    > li {
      position: relative;
      background-color: #fff;
      @include remCalc(border-radius, 8);
      @include remCalc(padding-top, 20);
      @include remCalc(margin-top, 20);
      @include remCalc(font-size, 30);
      &:first-child{
        margin-top: 0;
      }
      .pay-type {
        @include remCalc(font-size, 28);
        @include remCalc(padding, 0, 30);
        color: #333;
        position: relative;
      }
      .bottom {
        @include remCalc(padding, 14, 0);
        color: #666;
        @include remCalc(font-size, 24);
        display: flex;
        flex-wrap: wrap;
        > li {
          box-sizing: border-box;
          width:50%;
          @include remCalc(padding, 6, 30);
          display: flex;
          color: #666;
          > span {
            @include remCalc(padding-right, 20);
          }
        }
      }
    }
  }
}
.accountStatement-filterItem {
  width: 100%;
  height: 100%;
  .section {
    @include remCalc(padding, 0, 30);
    color: #333;
    .title {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 40, 0, 28, 0);
    }
    .picker-val {
      @include remCalc(font-size, 28);
      background: #f6f6f6;
      border: 1px solid #eeeeee;
      border-radius: 4px;
      @include remCalc(padding, 0, 20);
      @include remCalc(height, 80);
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      i {
        color: #ccc;
      }
    }
    .check-list {
      display: flex;
      flex-flow: wrap;
      //justify-content: space-around;
      li {
        text-align: center;
        //@include remCalc(padding, 0, 76);
        @include remCalc(width, 210);
        @include remCalc(height, 80);
        @include remCalc(line-height, 80);
        @include remCalc(font-size, 28);
        @include remCalc(margin-bottom, 20);
        @include remCalc(margin-right, 30);
        &:nth-child(3n){
          margin-right: 0;
        }
        color: #333;
        background: #f6f6f6;
        border: 1px solid #eeeeee;
        border-radius: 4px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        i {
          color: #fff;
          position: absolute;
          @include remCalc(font-size, 16);
          @include remCalc(right, 6);
          @include remCalc(bottom, 2);
          display: none;
        }
        &.checked {
          background: #FCE4E3;
          color: $color-red;
          border: 1px solid transparent;
          i {
            display: block;
          }
          &::before {
            position: absolute;
            content: "";
            display: block;
            @include remCalc(width, 100);
            @include remCalc(height, 40);
            @include remCalc(right, -26);
            @include remCalc(bottom, -20);
            background: $color-red;
            transform: rotate(-218deg);
          }
        }
      }
    }
  }
  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0;
    // box-shadow: 0 -2px 8px 0 #cccccc;
    @include thin-border(true,true);
    > div {
      flex: 1;
      @include remCalc(font-size, 36);
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);

      text-align: center;
      & + div {
        background: $color-red;
        color: #fff;
        &::before{
          border-color: $color-red;
        }
        &::after{
          border-color: $color-red;
        }
      }
      background: #fff;
      color: #121f33;
    }
  }
}

.section-other{
  background: #fff;
  @include remCalc(margin, 20, 0,0,0);
  .detail{
    display: block;
    li{
     width: 100%;
    }
  }
}
.detail {
  @include remCalc(padding, 0, 30, 20);
  display: flex;
  flex-wrap: wrap;
  > li {
    @include remCalc(font-size, 28);
    @include remCalc(padding, 6, 0);
    width:50%;
    box-sizing: border-box;
    color: #666;
    display: flex;
    align-items: center;
    >span{
      @include remCalc(padding, 0,20,0,0);
    }
  }
}
.detail-cell {
  @include remCalc(font-size, 36);
  @include remCalc(margin, 0,0,0,30);
  @include remCalc(padding, 16, 30, 16, 0);
  color: #333;
  display: flex;
  align-items: center;
  .title {
    @include remCalc(margin-right, 30);
  }
  >div{
    flex:1;
  }
}
.control-tab {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid $color-red;
  overflow: hidden;
  @include remCalc(margin, 20, 30,0,30);
  @include remCalc(border-radius, 12);
  li {
    flex: 1;
    text-align: center;
    color: $color-red;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    @include remCalc(font-size, 28);
    @include remCalc(height, 56);
    &.active {
      color: #fff;
      background-color: $color-red;
    }
    &:nth-of-type(n+2) {
      border-left: 1px solid$color-red;
    }
  }
}
.date-text {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  @include remCalc(font-size, 24);
  @include remCalc(padding, 20, 30, 0);
  > i {
    @include remCalc(padding-right, 10);
  }
}
.list-title {
  @include remCalc(font-size, 24);
  color: #999;
  @include remCalc(padding, 20, 30);
  &.g9 {
    color:#999;
  }
}
.bill-list {
  &.bill-list_day {
    margin-top: 1px;
    @include thin-border(false, false);
    > li {
      @include remCalc(padding, 10);
      &:before {
        width: 0;
      }
      .bottom {
        &:after {
          width: 0;
        }
        .item:nth-of-type(n+3):after {
          width: 0;
        }
      }
    }
  }
  .text-overflow-2 {
    @extend %text-overflow-2
  }
}

.tc {
  text-align: center;
}

.mt20{
  @include remCalc(margin, 20, 0, 0,0);
}
.overview-header {
  color: #333;
  background-color: #fff;
  @include remCalc(font-size, 28);
 
  @include remCalc(margin, 20, 0, 0,0);
  .tc{
    @include remCalc(font-size, 32);
    @include remCalc(padding, 30, 0, 0,0);
    i{
      color:#ccc;
    }
  }
  .tip{
    @include remCalc(padding, 0,0,30,0);
    @include remCalc(font-size, 24);
    color:#ccc;
    text-align: center;
  }
  .overview-header_flex {
    display: flex;
    color: #333;
    @include remCalc(padding-bottom, 35);
    .overview-header_flex-item {
      flex: 1;
      text-align: center;
      @include remCalc(font-size, 36);
      >p:nth-of-type(1) {
        color: #666;
        @include remCalc(font-size, 28);
        @include remCalc(margin-bottom, 15);
      }
    }
  }
  .overview-header_total {
    color: #333;
    @include remCalc(font-size, 60);
    @include remCalc(padding, 20, 0, 20);
  }
  .zhk-list_rarrow {
    position: relative;
    @include remCalc(top, 3);
  }
}



.arrow {
  @include remCalc(margin, 0, 6, 0 ,10);
  position: relative;
  @include remCalc(top, -2);
  display: inline-block;
  &:after {
    content: " ";
    display: inline-block;
    transform: rotate(135deg);
    // height: 8px;
    // width: 8px;
    // border-width: 2px 2px 0 0;
    @include remCalc(width, 16);
    @include remCalc(height, 16);
    @include remCalc(border-width, 4, 4, 0, 0);
    border-color: #c7c7cc;
    border-style: solid;
    outline: 1px solid transparent;
    pointer-events: none;
    position: relative;
  }
  &.active:after {
    @include remCalc(top, 8);
    transform: rotate(-45deg);
  }
}